<template>
  <div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>门店名称</td>
          <td><input type="text" v-model="info.sname" /></td>
        </tr>
        <tr>
          <td>门店图片</td>
          <td>
            <input type="file" @change="img" />
            <img
              :src="info.simg"
              width="100"
              height="100"
              v-if="info.simg != ''"
            />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input type="button" value="确定" @click="add" />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
let info: any = reactive({
  sname: "",
  simg: "",
});
const img = (e: any) => {
  info.simg = "";
  let f = e.target.files[0];
  let fs = new FormData();
  fs.append("file", f);
  axios({
    url: "/api/Stores/Img",
    method: "post",
    data: fs,
  }).then((res) => {
    console.log(res);
    if (info.simg == "不是图片") {
      alert("不是图片");
      return;
    }
    info.simg = res.data;
  });
};
const add = () => {
  if (info.sname == "") {
    alert("门店名称不能为空");
    return;
  }
  if (info.simg == "") {
    alert("门店图片不能为空");
    return;
  }
  axios({
    url: "/api/Stores/AddStores",
    method: "post",
    data: info,
  }).then((res) => {
    console.log(res);
    if (res.data == -1) {
      alert("门店名称不能重复");
      return;
    }
    if (res.data > 0) {
      alert("添加成功");
      return;
    } else {
      alert("添加失败");
      return;
    }
  });
};
</script>

<style scoped></style>
